<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
     /*
    元素选择器
    作用：根据标签名来选定指定的元素
    语法：标签名{}
    例子： p{}  h1{}  div{}
    */
    /*
    将所有的段落设置为红色字体
    这样存在一个问题：所有的p元素段落全都会变成一样的样式
    */
    /*
    p
    {
        color:orange;
    }
    */
    h1
    {
        color: green;
    }

    /*
    将“儿童相见不相识”设置为红色
    先给这句话设置一个id="red"
    */
    /*
    id选择器
    作用：根据元素的id属性值选中一个元素
    语法：#id属性值{}
    例子： #box{} #red{}
    注意：尽量保证id属性名不要重复使用，不然会有隐患
    */
    #red
    {
        color: red;
    }

    /*
    将“秋水……”和“落霞……”两句话颜色设置为蓝色
    class是一个标签的属性，它和id类似，不同的是class可以重复使用
    类选择器
    作用：根据元素的class属性值选中一组元素
    语法：.class属性值{}
    可以同时为一个元素指定多个class，注意要用空格隔开
    */
    .blue
    {
        color: blue;
    }
    .abc
    {
        font-size: 20px;
    }

    /*
    通配选择器
    作用：选中页面中的所有元素
    语法： *
    此适配器存在优先显示级别，如果别的元素已经定义了别的样式，那么就优先显示被定义的样式
    */
    *
    {
        color: hotpink;
    }
    </style>
</head>
<body>
    <h1 class="blue abc">我是标题</h1>
    <p>少小离家老大回</p>
    <p>乡音无改鬓毛衰</p>
    <p id="red">儿童相见不相识</p>
    <p>笑问客从何处来</p>
    <p class="blue">秋水共长天一色</p>
    <p class="blue">落霞与孤鹜齐飞</p>
</body>
</html>